import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}

export default class Scatter extends Component {    
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      isModalOpen: false,
      ChartTitle:'',
      file: null,
      DataList:[],
      styles :{
        backgroundImage: 'url(/img/Bar.png)',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: 'cover',
        width: '100%',
        height: '100vh'
      }
    };
    this.normFile = this.normFile.bind(this);
    this.onFinish = this.onFinish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };
  handleOk = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleCancel = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleChange = (e) => {
    this.setState({
      ChartTitle: e.target.value,
    });
  }
  normFile = (e) => {
    console.log('Upload event:', e);
    const File = e.file;
    this.setState({ file: File });
  }
  onFinish = (values) => {
    this.setState({
      isModalOpen: false,
    });
    this.initChart();
  }
    initChart = () => {
      const { ChartTitle ,DataList  } = this.state;
      this.setState({
        DataList: [],
      });
        var chartDom = document.getElementById('ScatterChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.histogram);
        fetch('./example/example-scatter.xlsx')
        .then(res => res.text())
        .then(data => {
          const rows = data.split('\n');  
          rows.forEach(row => {
            const data = row.split('\t');
            if(data == '') return;
            this.setState({
              DataList:[...this.state.DataList,data]
            });
          });
          var option = {
              xAxis: {},
              title: {
                text: ChartTitle,
                left: 'center',
              },
              yAxis: {},
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              series: [
                {
                  symbolSize: 20,
                  data: DataList,
                  type: 'scatter'
                }
              ]
            };
          this.myChart.setOption(option);
        });
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
      const { isModalOpen ,loading } = this.state;
        return (
          <>
          <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
          <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
          cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
          okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
          >
          <Spin spinning={loading}>  
          <Form onSubmit={this.handleSubmit}
                name="validate_other"
                {...formItemLayout}
                onFinish={this.onFinish}
                style={{
                  maxWidth: 600,
                }}
              >
                <Form.Item label="Title">
                  <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                </Form.Item>
                <Form.Item label="Dragger">
                  <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                   <Upload.Dragger name="files"  action="/upload.do" >
                      <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                      </p>
                      <p className="ant-upload-text">Click or drag file to this area to upload</p>
                    </Upload.Dragger>
                    </Form.Item>
                  </Form.Item>
                  <Form.Item label="Example File">
                  <Button type="text" onClick={()=> this.getExampleFile()} danger>Example File</Button>
                  </Form.Item>
                <Form.Item
                  wrapperCol={{
                    span: 12,
                    offset: 6,
                  }}
                >
                  <Button type="primary" htmlType="submit" >
                    Submit
                  </Button>
                </Form.Item>
            </Form></Spin>
          </Modal>
            <div className='w100 h100' id='ScatterChart'></div>
        </>
        )
    }
}
